<template>
  <div class="video-grid-container">
    <div class="video-grid">
      <div v-for="(video, index) in videos" :key="index" class="video-card">
        <div class="video-cover">
          <img :src="video.cover" :alt="video.title" class="cover-image">
          <div class="video-stats">
            <span class="play-count"><i class="icon-play"></i>{{ video.playCount }}</span>
            <span class="duration">{{ video.duration }}</span>
          </div>
        </div>
        <div class="video-info">
          <h3 class="video-title">{{ video.title }}</h3>
          <p class="video-desc">{{ video.description }}</p>
          <div class="up-info">
            <span class="up-name">{{ video.upName }}</span>
            <span class="up-date">{{ video.date }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const videos = [
  {
    cover: 'https://i1.hdslb.com/bfs/archive/fa5cf00539bda5bcb7eadfc2ff5309716e719a14.jpg@760w_428h_1c.avif',
    title: '第一人称入职万人大厂富士康全过程',
    playCount: '58.7万',
    duration: '46:65',
    description: '暑假想进厂打工的必备！在网上找的高薪工作还包吃包住到底层真是假？让我看...',
    upName: '网购少年山拾百',
    date: '06-22'
  },
  {
    cover: 'https://i0.hdslb.com/bfs/archive/0ab67c67f61e409d44b3ec010a72d779561ef913.jpg@760w_428h_1c.avif',
    title: '两个小球哪个最快？最速曲线看似简单，却隐藏着物理学深层法则！',
    playCount: '42.52万',
    duration: '15:30',
    description: '',
    upName: '科学认识论',
    date: '04-04'
  },
  {
     cover: 'https://i1.hdslb.com/bfs/archive/fa5cf00539bda5bcb7eadfc2ff5309716e719a14.jpg@760w_428h_1c.avif',
    title: '韩国总统尹锡悦',
    playCount: '9.10万',
    duration: '05:17',
    description: '走向末路的尹锡悦',
    upName: '第三提醒课',
    date: '04-05'
  },
  {
 cover: 'https://i1.hdslb.com/bfs/archive/fa5cf00539bda5bcb7eadfc2ff5309716e719a14.jpg@760w_428h_1c.avif',
    title: '两天时谈岛岛连线',
    playCount: '54.7万',
    duration: '07:79',
    description: '为什么越聪明的人越容易悲观？',
    upName: '尼采的胡子Nie',
    date: '06-16'
  },
  {
   cover: 'https://i1.hdslb.com/bfs/archive/fa5cf00539bda5bcb7eadfc2ff5309716e719a14.jpg@760w_428h_1c.avif',
    title: '瑞士捷报',
    playCount: '11.8万',
    duration: '30:48',
    description: '中美关税战休兵，越南偏压力大了，要上菜单了？（岛岛连线）',
    upName: '小王Albert',
    date: '05-15'
  },
  {
   cover: 'https://i0.hdslb.com/bfs/archive/0ab67c67f61e409d44b3ec010a72d779561ef913.jpg@760w_428h_1c.avif',
    title: '破晓之时',
    playCount: '2.1万',
    duration: '38:03',
    description: '【SCP基金会】SCP-001破晓之时（S.D.Io cke的提案）',
    upName: '某不存在的能言团',
    date: '06-23'
  },
  {
   cover: 'https://i1.hdslb.com/bfs/archive/fa5cf00539bda5bcb7eadfc2ff5309716e719a14.jpg@760w_428h_1c.avif',
    title: '瑞士捷报',
    playCount: '11.8万',
    duration: '30:48',
    description: '中美关税战休兵，越南偏压力大了，要上菜单了？（岛岛连线）',
    upName: '小王Albert',
    date: '05-15'
  },
  {
   cover: 'https://i0.hdslb.com/bfs/archive/0ab67c67f61e409d44b3ec010a72d779561ef913.jpg@760w_428h_1c.avif',
    title: '破晓之时',
    playCount: '2.1万',
    duration: '38:03',
    description: '【SCP基金会】SCP-001破晓之时（S.D.Io cke的提案）',
    upName: '某不存在的能言团',
    date: '06-23'
  }
];
</script>

<style lang="scss" scoped>
.video-grid-container {
  // max-width: 1200px;
  margin: 0 auto;
  padding: 30px;


  .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;

    .video-card {
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .video-cover {
        position: relative;
        aspect-ratio: 16/9;

        .cover-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .video-stats {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          justify-content: space-between;
          padding: 8px;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
          color: white;
          font-size: 12px;

          .play-count {
            display: flex;
            align-items: center;

            .icon-play {
              margin-right: 4px;
              font-size: 14px;
            }
          }
        }
      }

      .video-info {
        padding: 12px;

        .video-title {
          font-size: 14px;
          margin: 0 0 8px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 40px;
        }

        .video-desc {
          font-size: 12px;
          color: #666;
          margin: 0 0 8px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 34px;
        }

        .up-info {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

/* 图标样式（可以使用Element Plus或其他图标库） */
.icon-play {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: contain;
}
</style>
